<template>
  <div>
    <header>
      <n-bar></n-bar>
      <div class="header_box">
        <div class="top">
          <span class="iconfont icon-position"></span>
          <a href="javascript:;">
            <img src="../assets/images/logo.png" alt="" />
          </a>
          <div class="search">
            <label for="search">
              <i class="iconfont icon-fangdajing"></i>
            </label>
            <input
              type="text"
              class="iconfont"
              id="search"
              placeholder="按内容搜索"
              @change="search"
              v-model="keywords"
            />
          </div>
          <a href="javascript:;">
            <i class="iconfont icon-dianpu"></i>
          </a>
        </div>

        <div class="recommend">
          <ul>
            <li
              @click="tuijian(item.id)"
              v-for="item in catelist"
              :key="item.id"
            >
              <a href="javascript:;">{{ item.catename }}</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <div class="banner">
      <div class="banner_top">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerlist" :key="item.id">
            <img class="img" :src="item.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="banner_bot">
        <van-grid :border="false" :gutter="2" :column-num="5">
          <van-grid-item v-for="item in gridlist" :key="item.id">
            <van-image :src="item.img" />
            <p class="grid-title">{{ item.title }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="bot">
      <div class="top_box">
        <div class="left">
          <div class="first">
            <h3>
              <a href="javascript:;">限时秒杀</a>
            </h3>
            <a href="javascript:;">
              查看更多
              <span class="iconfont icon-arrow-right"></span>
            </a>
          </div>
          <p>每天0点场，好货秒不停</p>
          <div class="time">
            <span>05</span>
            <i>：</i>
            <span>20</span>
            <i>：</i>
            <span>48</span>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <h3>
              <a href="javascript:;">品牌上新</a>
            </h3>
            <p>9点整，抢大牌</p>
            <a href="javascript:;">
              疯抢红包
              <span class="iconfont icon-arrow-right"></span>
            </a>
          </div>
          <div class="bot">
            <h3>
              <a href="javascript:;">日用好物</a>
            </h3>
            <p>愿君多采撷</p>
            <a href="javascript:;">
              塞满奖券
              <span class="iconfont icon-arrow-right"></span>
            </a>
          </div>
        </div>
      </div>
      <div class="bot-box">
        <div class="title">
          <h2 @click="hTab(0)" :class="flg == 0 ? 'action' : ''">
            双11尖货预购
          </h2>
          <h2 @click="hTab(1)" :class="flg == 1 ? 'action' : ''">畅购全球</h2>
        </div>
        <ul>
          <li>
            <a href="javascript:;">
              <img src="../assets/images/底1.png" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../assets/images/底2.png" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../assets/images/底3.png" alt="" />
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="../assets/images/底4.png" alt="" />
            </a>
          </li>
        </ul>
      </div>
    </div>
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in hotslist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price | toPrice"
        >
          <template #footer>
            <van-button size="mini" @click.stop="goCart(item.id)"
              >立即抢购</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in newslist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price | toPrice"
        >
          <template #footer>
            <van-button size="mini" @click.stop="goCart(item.id)"
              >立即抢购</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodslist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price | toPrice"
        >
          <template #footer>
            <van-button size="mini" @click.stop="goCart(item.id)"
              >立即抢购</van-button
            >
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getBanner, getHomeCate, getHomeGoods, cartAdd } from "../requset/app";
import { Toast } from "vant";
export default {
  data() {
    return {
      keywords: "", // 关键词
      bannerlist: [],
      gridlist: [
        {
          id: 1,
          img: require("../assets/images/限时抢购.png"),
          title: "限时秒杀",
        },
        {
          id: 2,
          img: require("../assets/images/畅销商品.png"),
          title: "畅销商品",
        },
        {
          id: 3,
          img: require("../assets/images/品质大牌.png"),
          title: "品质大牌",
        },
        {
          id: 4,
          img: require("../assets/images/小u自营.png"),
          title: "小U自营",
        },
        {
          id: 5,
          img: require("../assets/images/积分兑换.png"),
          title: "积分商城",
        },
      ],
      catelist: [], //导航列表
      goodslist: [], //所有商品列表
      newslist: [], //最新列表
      hotslist: [], //热门推荐
      flg: 0, // 0- 双11尖货预购 1-畅购全球
    };
  },
  mounted() {
    // 轮播图列表
    getBanner().then((res) => {
      //   console.log(res, "轮播图");
      if (res.code == 200) {
        this.bannerlist = res.list;
      }
    });
    // 首页快速导航
    getHomeCate().then((res) => {
      // console.log(res, "首页快速导航");
      if (res.code == 200) {
        this.catelist = res.list;
      }
    });
    //页面一加载调用 获取商品信息首页
    getHomeGoods().then((res) => {
      // console.log(res,'首页的商品列表');
      if (res.code == 200) {
        this.hotslist = res.list[0].content;
        this.newslist = res.list[1].content;
        this.goodslist = res.list[2].content;
      }
    });
  },
  methods: {
    // 点击导航列表,跳转分类列表页
    tuijian(id) {
      this.$router.push({
        path: "/catelist",
        query: {
          id,
          type: 1,
        },
      });
    },
    //跳转到商品详情页面
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    // 跳转到购物车
    goCart(id) {
      let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));

      // 购物车添加
      let obj = {
        uid: userinfo.uid,
        goodsid: id,
        num: 1,
      };
      cartAdd(obj).then((res) => {
        // console.log(res, "购物车添加");
        if (res.code == 200) {
          Toast(res.msg);
          this.$router.push("/cart");
        }
      });
    },
    // 点击搜索
    search() {
      // 搜索
      this.$router.push("/searchlist?keywords=" + this.keywords);
    },
    //点击切换 双11尖货预购
    hTab(i) {
      this.flg = i;
    },
  },
};
</script>

<style scoped>
.van-tabs{
  min-height: 220vh;
}
/* 头部 */
header {
  background-color: #ff6040;
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
  box-sizing: border-box;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

/* logo */
header .header_box .top {
  height: 0.48rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .header_box .top > span {
  font-size: 0.22rem;
  color: #fff;
}

header .header_box .top > a img {
  width: 0.91rem;
  height: 0.24rem;
}
header .header_box .top .search {
  position: relative;
}
header .header_box .top .search i {
  position: absolute;
  left: 0.03rem;
  top: 0.05rem;
  font-size: 0.16rem;
  color: #999;
}
header .header_box .top .search input {
  width: 1.7rem;
  height: 0.32rem;
  border: none;
  border: 1px solid #e6e6e6;
  border-radius: 0.03rem;
  font-size: 0.15rem;
  color: #999999;
  padding-left: 0.22rem;
  box-sizing: border-box;
}

header .header_box .top > a i {
  font-size: 0.22rem;
  color: #fff;
}

/* 推荐 */
.header_box .recommend {
  width: 100%;
  overflow: auto;
}
.header_box .recommend ul {
  height: 0.32rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.header_box .recommend ul li a {
  font-size: 0.16rem;
  color: #fff;
}

.header_box .recommend ul li:nth-child(1) a {
  font-size: 0.16rem;
  font-weight: bold;
}

.header_box .recommend ul li:nth-child(1) {
  position: relative;
}

.header_box .recommend ul li:nth-child(1) a::after {
  content: "";
  width: 0.2rem;
  height: 0.02rem;
  background: #ffffff;
  border-radius: 1px;
  position: absolute;
  bottom: -0.04rem;
  left: 0.06rem;
}

.header_box .recommend ul li span {
  font-size: 0.13rem;
  color: #fff;
}

/* 中间的图片 */
.banner_top .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.banner_top .my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.banner .banner_bot .grid-title {
  font-size: 0.13rem;
}

.bot {
  background-color: #f2f2f2;
  overflow: hidden;
}

.bot .top_box {
  display: flex;
  margin: 0.1rem;
}

/* 限时秒杀 */

.bot .top_box .left {
  width: 1.75rem;
  height: 1.75rem;
  background: url(../assets/images/图1.png) no-repeat;
  background-size: cover;
}

.bot .top_box .left .first {
  height: 0.16rem;
  margin: 0.1rem 0.15rem 0rem 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bot .top_box .left .first h3 a {
  font-size: 0.16rem;
  color: #85a642;
  font-weight: bold;
}

.bot .top_box .left .first > a {
  font-size: 0.1rem;
  color: #333333;
}

.bot .top_box .left .first > a span {
  font-size: 0.08rem;
  color: #333;
}

.bot .top_box .left p {
  font-size: 0.1rem;
  color: #b1cc7a;
  margin: 0.02rem 0 0 0.1rem;
}

.bot .top_box .left .time {
  display: flex;
  align-items: center;
  margin: 0.05rem 0 0 0.1rem;
}

.bot .top_box .left .time i {
  height: 0.08rem;
  line-height: 00.08rem;
}

.bot .top_box .left .time span {
  width: 0.16rem;
  height: 0.18rem;
  background-image: linear-gradient(180deg, #85a642 0%, #b1cc7a 100%);
  border-radius: 1px;
  font-size: 0.1rem;
  color: #fff;
  text-align: center;
  line-height: 0.18rem;
}

.bot .top_box .left .time i {
  font-size: 0.05rem;
  color: #85a642;
}

/* 品牌上新 */
.bot .top_box .right {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.05rem;
}

.bot .top_box .right .top {
  background: url(../assets/images/图2.png) no-repeat;
  background-size: cover;
  width: 1.75rem;
  height: 0.85rem;
}

.bot .top_box .right .top h3 a {
  font-size: 0.16rem;
  color: #ff6040;
  font-weight: bold;
  padding: 0.05rem 0 0 0.1rem;
  box-sizing: border-box;
}

.bot .top_box .right .top p {
  font-size: 0.1rem;
  color: #ff9580;
  margin: 0.01rem 0 0 0.1rem;
}

.bot .top_box .right .top > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.84rem;
  height: 0.25rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  font-size: 0.1rem;
  color: #ffffff;
  margin: 0.04rem 0 0 0.1rem;
}

.bot .top_box .right .top > a span {
  font-size: 0.1rem;
  color: #fff;
  margin-left: 0.03rem;
}

.bot .top_box .right .bot {
  background: url(../assets/images/图3.png) no-repeat;
  background-size: cover;
  width: 1.75rem;
  height: 0.85rem;
  margin-top: 0.05rem;
}

.bot .top_box .right .bot h3 a {
  font-size: 0.16rem;
  color: #af40ff;
  font-weight: bold;
  padding: 0.05rem 0 0 0.1rem;
  box-sizing: border-box;
}

.bot .top_box .right .bot p {
  font-size: 0.1rem;
  color: #ca80ff;
  margin: 0.01rem 0 0 0.1rem;
}

.bot .top_box .right .bot > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.84rem;
  height: 0.25rem;
  background-image: linear-gradient(180deg, #af40ff 0%, #f58cff 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  font-size: 0.1rem;
  color: #ffffff;
  margin: 0.04rem 0 0 0.1rem;
}

.bot .top_box .right .bot > a span {
  font-size: 0.1rem;
  color: #fff;
  margin-left: 0.03rem;
}
.bot .bot-box {
  background-color: #fff;
  margin: 0 0.1rem;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.bot .bot-box .title {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 0.1rem;
}
.bot .bot-box .title .action {
  color: #ff6040;
}
.bot .bot-box .title h2 {
  font-size: 0.16rem;
  /* color: #ff6040; */
  color: #999;
}

.bot .bot-box ul {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.16rem;
}
.bot .bot-box ul li a {
  display: flex;
  justify-content: space-evenly;
}
.bot .bot-box ul li a img {
  width: 0.8rem;
  height: 0.82rem;
}
.van-button {
  padding: 0.05rem 0.1rem;
  background-color: #ff1010;
  color: #fff;
}
</style>
